import {goods} from "./goods.js";
export let name = "order";
export function Render(){
    return`
<style>
.content{
background-color: #eee;
}
/* 订单容器 */
.order-container {
  width: 100%;
  background-color: #eee;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #333;
}
.receipt-information{
  padding: 9rem 1.25rem 1rem 1.25rem; 
  background-color: white;
  margin-bottom: 1rem;
}
/* 模块通用样式 */
.order-section {
  padding:1rem ; 
  background-color: white;
  margin-bottom: 1rem;
}

/* 标题样式 */
.section-title, .section-header {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1rem; 
}

/* 收货信息 - 标签 */
.default-tag {
  display: block;
  padding: 0.5rem 1rem;
  background-color: #4caf50;
  color: #fff;
  border-radius: 0.5rem; 
  font-size: 2.2rem; 
  margin-right: 2rem; 
  margin-bottom: 1rem;
  float: left;
}

/* 收货信息 - 地址、联系方式 */
.contact, .phone {
  font-size: 2.3rem;
  margin-bottom: 2rem;
  margin-left: 1.5rem;
}
.address{
  float: left;
  padding-top: 0.2rem;
  font-size: 2.5rem;
  color: #aaa;
  margin-left: 1rem;
}

/* 配送方式 - 商品信息 */
.delivery-info {
  display: flex;
  align-items: flex-start;
  margin-top: 2.5rem;
  padding-right: 1rem;
  margin-bottom: 2rem;
}
.product-img {
  width: 10rem; 
  background-color: #eee;
  border-radius: 1rem; 
  margin-right: 2.5rem;
}
.product-desc {
  flex: 1;
}
.product-name {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 2rem;
  display: -webkit-box;       
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2;     
  overflow: hidden;          
  text-overflow: ellipsis;
  line-height: 3rem;
}
.product-price {
  font-size: 3rem; 
  color: #666;
}

/* 订单备注 */
.remark-tip {
  font-size: 2.5rem; 
  color: #999;
  float: right;
  border: none !important;
}
.orderMessage{
width: 30%;
margin-top: 0.6rem;
font-size: 2.8rem;
}

/* 金额信息 */
.amount-section {
  border-bottom: none;
}
.amount-item {
  display: flex;
  justify-content: space-between;
  font-size: 2.5rem; 
  color: #666;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.amount-item.discount {
  color: #f00;
}
.amount-item.total {
  font-weight: 600;
  color: #333;
  padding-top: 1rem;
}

/* 发票 */
.invoice-tip {
  font-size: 2rem; 
  color: #666;
}

/* 提交订单区域 */
.submit-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background-color: #f9f9f9;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.total-price {
  font-size: 3rem; 
  color: #f00;
  font-weight: 600;
}
.submit-btn {
  padding: 1rem 1.5rem; 
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 1rem; 
  font-size: 2.8rem;
  cursor: pointer;
}
.submit-btn:active {
  opacity: 0.8;
}
.quitBtn{
    width: 6rem;
    height: 6rem;
    position: fixed;
    top: 1rem;
    left: 1rem;
    font-size: 2rem;
    border-radius: 6rem;
    background-color: #fff;
    border: 0.1rem solid #333;
    }
.order-out{
    display: block;
    float: right;
    margin-right: 1rem;
    font-size: 3rem;
}
.ticket .section-title{
    font-size: 2.8rem;
    padding-top: 1rem;
}
.ticket span{
    display: block;
    font-size: 3rem;
    padding-top: 1rem;
}
.order-title{
font-size: 3rem;
background-color: white;
width: 50%;
position: fixed;
top: 2rem;
left: 40%;
}
.coupon-list {
      background-color: #fff;
      border-radius: 3rem 3rem 0 0  ; /* 6px，6/16=0.375rem */
      padding: 3rem 1.5rem ; /* 上下 12px 左右 15px，12/16=0.75rem  15/16=0.9375rem */
      height: 60%;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .section-title {
      font-size: 2rem; /* 15px，15/16=0.9375rem */
      color: #333;
      font-weight: bold;
      margin-bottom: 1rem; /* 5px，5/16=0.3125rem */
    }
    .sub-title {
      font-size: 2rem; /* 13px，13/16=0.8125rem */
      color: #999;
      margin-bottom: 1rem; /* 10px，10/16=0.625rem */
    }
    .coupon-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fdfdfd;
      border: 0.5rem solid #f2f2f2;
      border-radius: 1rem; /* 5px，5/16=0.3125rem */
      padding: 1rem; /* 10px，10/16=0.625rem */
      margin-bottom: 1rem; /* 10px，10/16=0.625rem */
    }
    .tag {
      display: inline-block;
      padding: 1rem 1rem; /* 上下 3px 左右 6px，3/16=0.1875rem  6/16=0.375rem */
      background-color: #c8f0d0; /* 满减券背景色，可改 */
      color: #00cc66; /* 满减券文字色，可改 */
      font-size: 3rem; /* 12px，12/16=0.75rem */
      border-radius: 1rem; /* 3px，3/16=0.1875rem */
      margin-right: 1rem; /* 8px，8/16=0.5rem */
    }
    .coupon-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .coupon-name {
      font-size: 3rem; /* 14px，14/16=0.875rem */
      color: #333;
      margin-bottom:1rem; /* 5px，5/16=0.3125rem */
    }
    .price {
      font-size: 3rem; /* 15px，15/16=0.9375rem */
      color: #ff3333; /* 价格红色，可改 */
      font-weight: bold;
      margin-bottom: 1rem; /* 5px，5/16=0.3125rem */
    }
    .price span {
      font-size: 2rem; /* 16px，16/16=1rem */
    }
    .desc {
      display: flex;
      justify-content: space-between;
      font-size: 1rem; /* 12px，12/16=0.75rem */
      color: #999;
    }
    .btn {
      min-width: 5rem; /* 50px，50/16=3.125rem */
      padding: 1rem 1rem; /* 上下 6px 左右 10px，6/16=0.375rem  10/16=0.625rem */
      border: none;
      border-radius: 1rem; /* 5px，5/16=0.3125rem */
      font-size: 2rem; /* 12px，12/16=0.75rem */
      cursor: pointer;
    }
    .get-btn {
      background-color: #e6e6e6;
      color: #999;
    }
    .used-btn {
      background-color: #e6e6e6;
      color: #999;
    }
    .getpage{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    }
    .backGround{
    width: 100%;
    height: 40%;
    }
</style>




   <div class="order-container">
   <div class="order-title">确认订单</div>
  <!-- 收货信息 -->
  <div class="receipt-information">
    <div class="section-header clearfix">
      <span class="tag default-tag">默认</span>
      <p class="address">天津市 市辖区 河东区</p>
    </div>
    <p class="contact clearfix">11<span class="order-out"> > </span></p>
    <p class="phone">11 17838459200</p>
  </div>

  <!-- 配送方式 -->
  <div class="order-section">
    <div class="section-title">配送方式</div>
    <div class="delivery-info">
      <img src="${goods[0].src}" class="product-img">
      <div class="product-desc">
        <p class="product-name">${goods[0].text}</p>
        <p class="product-price">￥${goods[0].price} × 1</p>
      </div>
    </div>
  </div>

  <!-- 订单备注 -->
  <div class="order-section clearfix">
    <div class="section-title orderMessage left">订单备注</div>
    <input type="text" class="remark-tip" placeholder="建议留言前先与商家沟通">
  </div>

  <!-- 金额信息 -->
  <div class="order-section amount-section">
    <div class="amount-item">
      <span>商品金额</span>
      <span>¥${goods[0].price}</span>
    </div>
    <div class="amount-item">
      <span>运费</span>
      <span>+¥10.00</span>
    </div>
    <div class="amount-item checkCoupons">
      <span>优惠券</span>
      <span>暂无可用优惠券</span>
    </div>
    <div class="amount-item discount">
      <span>活动优惠</span>
      <span>-¥0.00</span>
    </div>
    <div class="amount-item total">
      <span>共1件 合计：</span>
      <span>¥25.00</span>
    </div>
  </div>

  <!-- 发票 -->
  <div class="order-section ticket clearfix">
    <div class="section-title left">申请发票</div>
    <span class="right"> > </span>
  </div>

  <!-- 提交订单 -->
  <div class="submit-section">
    <p class="total-price">¥25.00</p>
    <button class="submit-btn">提交订单</button>
  </div>
</div>


<!--点击退出到首页-->
<input type="button" class="quitBtn" value="<退出" data-hash = "/">

<!--领券页面-->
<div class="getpage" style="display: none">
<div class="backGround"></div>
<div class="coupon-list">
  <h3 class="section-title">优惠券</h3>
  <p class="sub-title">不可使用优惠券</p>
  <!-- 优惠券条目 1 -->
  <div class="coupon-item">
    <span class="tag">满减券</span>
    <div class="coupon-info">
      <h4 class="coupon-name">测试全场通用</h4>
      <p class="price">¥<span>50.00</span></p>
      <div class="desc">
        <span>领取时间：2025-07-07 至 2025-07-31</span>
        <span>满100.00可用</span>
      </div>
    </div>
    <button class="btn get-btn">不可使用</button>
  </div>
  <!-- 优惠券条目 2 -->
  <div class="coupon-item">
    <span class="tag">满减券</span>
    <div class="coupon-info">
      <h4 class="coupon-name">1</h4>
      <p class="price">¥<span>2.00</span></p>
      <div class="desc">
        <span>领取时间：2025-06-05 至 2025-07-31</span>
        <span>满10.00可用</span>
      </div>
    </div>
    <button class="btn used-btn">不可使用</button>
  </div>
</div>
</div>

    `
}

export function afterRender(){
//商品详情页显示的时候,底部导航栏隐藏
    let bottomNav = document.querySelector(".bottomNav");
    bottomNav.style.display = "none";
    let quitBtn = document.querySelector(".quitBtn");
    let path = quitBtn.getAttribute("data-hash");
    quitBtn.addEventListener("click", function (){
        location.hash = path;
        bottomNav.style.display = "block";
    })
//点击优惠券弹出可用/不可用的优惠券
    let checkCoupons = document.querySelector(".checkCoupons");
    let getpage = document.querySelector(".getpage");
    checkCoupons.addEventListener("click", function (){
        getpage.style.display = "block";
    })

    let backGround = document.querySelectorAll(".backGround");
    backGround.forEach(function (item){
        item.addEventListener("click", function (){
            let fatherDiv = item.parentElement;
            fatherDiv.style.display = "none";
        })
    })

    //点击提交订单跳转到支付页面
    let  submitBtn = document.querySelector(".submit-btn");
    submitBtn.addEventListener("touchend", function () {
        location.hash = "/goods/payment";
    })
//点击地址栏跳转到收货地址页面
//点击申请发票跳转到申请发票页面
}